<template>
  <n-card v-if="showDemo" :id="demoFileName" class="demo-card">
    <template #header>
      <span style="cursor: pointer" @click="handleTitleClick">
        <slot name="title" />
      </span>
    </template>
    <template #header-extra>
      <a-tooltip>
        <template #title>复制代码</template>
        <copy-code-button
          depth="3"
          style="padding: 0; margin-right: 6px"
          size="tiny"
          :code="showTs ? sfcTsCode : sfcJsCode"
          success-text="复制成功"
        />
      </a-tooltip>
      <a-tooltip ref="expandCodeButtonRef">
        <template #title> {{ !showCode ? '显示代码' : '收起代码' }}</template>
        <n-button
          style="padding: 0"
          size="tiny"
          text
          depth="3"
          @click="toggleCodeDisplay"
        >
          <template #icon>
            <n-icon>
              <code-outline />
            </n-icon>
          </template>
        </n-button>
      </a-tooltip>
    </template>
    <slot name="content" />
    <slot name="demo" />
    <template v-if="showCode" #footer>
      <!-- <n-tabs
        v-if="languageType === 'ts'"
        size="small"
        type="segment"
        style="padding: 12px 24px 0 24px"
        :value="showTs ? 'ts' : 'js'"
        @update:value="($e: string) => (showTs = $e === 'ts')"
      >
        <n-tab name="ts"> TypeScript </n-tab>
        <n-tab name="js"> JavaScript </n-tab>
      </n-tabs> -->
      <n-scrollbar
        x-scrollable
        content-style="padding: 20px 24px;"
        style="height: auto"
      >
        <!-- <n-code v-if="showTs" language="html" :code="sfcTsCode" />
        <n-code v-else language="html" :code="sfcJsCode" /> -->
        <n-code language="html" :code="sfcJsCode" />
      </n-scrollbar>
    </template>
  </n-card>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { CodeOutline } from '@vicons/ionicons5'
// import EditOnGithubButton from './EditOnGithubButton.vue'
// import EditInCodeSandboxButton from './EditInCodeSandboxButton.vue'
import CopyCodeButton from './CopyCodeButton.vue'

export default defineComponent({
  components: {
    CodeOutline,
    CopyCodeButton
    // EditOnGithubButton,
    // EditInCodeSandboxButton,
  },
  props: {
    title: {
      type: String,
      required: true
    },
    tsCode: {
      type: String,
      required: true
    },
    demoFileName: {
      type: String,
      required: true
    },
    relativeUrl: {
      type: String,
      required: true
    },
    jsCode: {
      type: String,
      required: true
    },
    languageType: {
      type: String,
      default: 'js'
    }
  },
  setup(props) {
    const isDebugDemo = /([dD])ebug/.test(props.demoFileName)
    const showDemoRef = computed(() => {
      return !isDebugDemo
    })
    const showCodeRef = ref(false)
    const showTsRef = ref(props.languageType === 'ts')
    const expandCodeButtonRef = ref(null)
    return {
      expandCodeButtonRef,
      showDemo: showDemoRef,
      showCode: showCodeRef,
      showTs: showTsRef,
      sfcTsCode: decodeURIComponent(props.tsCode),
      sfcJsCode: decodeURIComponent(props.jsCode),
      toggleCodeDisplay() {
        showCodeRef.value = !showCodeRef.value
      },
      handleTitleClick: () => {
        window.location.hash = `#${props.demoFileName}`
      },
      toggleLanguageChange() {
        showTsRef.value = !showTsRef.value
      }
    }
  }
})
</script>
